:root {
  --el-text-color-switch: #5b626b;
  --main-bg: #1f2431;
  --bs-blue: #7a6fbe;
  --font-color: #ffffff;
  --card-font-color: #dee2e6;
  --card-bg: #2a3142;
  --border-color: #3a4358;
  --input-border-color: #7a859b;
  --el-table-border: 1px solid var(--border-color);
  --bs-table-striped-bg: rgb(50, 57, 73);
  --el-page-bg-hover: #a39bd5;
  --el-page-bg: #363f55;
  --popover-bg-hover: #30384b;
}
#app {
  & * {
    transition: all 0.2s;
  }
}
.dark-mode {
  .right-box {
    background: var(--bs-blue);
    .el-icon {
      color: var(--font-color);
    }
    .el-drawer {
      background: var(--main-bg);
      .el-drawer__header,
      .el-switch .el-switch__label {
        color: var(--font-color);
      }
    }
  }
  .el-main {
    background: var(--main-bg);

    .el-breadcrumb__item:last-child .el-breadcrumb__inner,
    .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
    .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
    .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover,
    .el-breadcrumb__inner a,
    .el-breadcrumb__inner.is-link {
      color: var(--font-color);
    }
  }
  .el-dropdown__popper.el-popper {
    background: var(--border-color) !important;
    border-color: var(--border-color) !important;
    .el-popper.is-light .el-popper__arrow::before {
      background: var(--main-bg);
    }
    .el-dropdown-menu {
      background: var(--border-color);
      .el-dropdown-menu__item {
        color: var(--font-color);
      }
      .el-dropdown-menu__item:focus,
      .el-dropdown-menu__item:not(.is-disabled):hover {
        background-color: rgb(34, 46, 59);
        color: var(--font-color);
      }
      .el-dropdown-menu__item--divided {
        border-top-color: var(--el-text-color-switch);
      }
    }

    .el-popper__arrow::before {
      background: var(--border-color);
      border-color: var(--border-color) !important;
    }
  }
  .el-card {
    background: var(--card-bg);
    border-color: var(--card-bg);
    color: var(--card-font-color);
    .el-card__header {
      border-color: var(--border-color);
    }
  }
  .el-input__inner {
    background-color: var(--card-bg);
    border-color: var(--input-border-color);
  }
  .el-input-group__append,
  .el-input-group__prepend {
    background-color: var(--card-bg);
    border-color: var(--input-border-color);
    .el-icon {
      color: var(--font-color);
    }
  }

  .el-table {
    & th.el-table__cell,
    & tr {
      color: var(--card-font-color);
      background: var(--card-bg);
    }
    & td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
      --el-table-border: 1px solid var(--border-color);
    }
    & .el-table__body > tbody > tr:nth-of-type(odd) {
      background: var(--bs-table-striped-bg);
    }
    &.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
      background-color: var(--main-bg);
    }
  }

  .page-box {
    .el-pagination {
      &.is-background {
        .el-pager {
          li {
            background-color: var(--el-page-bg);
            color: var(--el-font-color);
          }

          li:not(.disabled):hover {
            color: var(--el-font-color);
            background-color: var(--el-page-bg-hover);
          }
          li:not(.disabled).active {
            background-color: var(--bs-blue);
          }
        }

        .btn-next,
        .btn-prev {
          background-color: var(--el-page-bg);
          color: var(--el-font-color);
        }
        .btn-next:not(:disabled):hover,
        .btn-prev:not(:disabled):hover {
          color: var(--el-font-color);
          background-color: var(--el-page-bg-hover);
        }
      }
    }
  }

  .el-popover.el-popper.is-light {
    background: var(--border-color);
    border-color: var(--border-color);
    .el-popover__title {
      color: var(--card-font-color);
    }
    .el-popper__arrow::before {
      background: var(--border-color);
      border-color: var(--border-color);
    }
  }

  .el-button--text {
    color: var(--bs-blue);
    &:focus,
    &:hover {
      color: var(--el-page-bg-hover);
    }
  }

  .el-input__inner:focus {
    border-color: var(--bs-blue);
  }
}
